<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>欢迎进入贵州遵义免费Wifi  IPv6新世界</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: auto;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
	.swiper-container {
        width: 100%;
        height: auto;
		margin: 0 auto;
		background-color: #7C0005;
    }
	.button { display:block; float:left;}
    .maincontent{
		 text-align: center;
	    vertical-align:middle;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
    }
    @media screen and (min-width: 1001px){
		.maincontent{ width:1280px; min-height:1280px; margin:0 auto; overflow:hidden;}
	    .main{
　     　max-width:800px;
　　     width:800px;
　　     width:expression(document.body.clientWidth>800?”800px”:”auto”);
　     　overflow:hidden;
        position:relative
        text-align: center;
	    vertical-align:middle;
		}
		.button {
		position:absolute; bottom:200px; left:36%;
		text-align: center;
	    vertical-align:middle;
		}
	}
	@media screen and (min-width: 601px) and (max-width:1000px){
		.maincontent{min-width: 601px; max-width:1000px; min-height:1280px; margin:0 auto; overflow:hidden; }
		.main{
　     　max-width:640px; max-height:1024px; 
　　     width:640px; height:1024px;
　　     width:expression(document.body.clientWidth>720?”720px”:”auto”);
         height:expression(document.body.clientWidth>1024?”1024px”:”auto”);
        overflow:hidden;
		position:relative;
        text-align: center;
	    vertical-align:middle;
		}
		.button {
		width:314px; height:69px;
		position:absolute; bottom:240px; left:30%;
		text-align: center;
	    vertical-align:middle;
		}
	}
	@media screen and (min-width: 360px) and (max-width: 600px) {
		.maincontent {min-width: 360px; max-width:600px; min-height:640px; margin:0 auto; overflow:hidden; background-size:720px 896px; }
		.main{
　     　min-width:360px; max-height:576px;
        width:360px; height:576px;
　　     width:expression(document.body.clientWidth>360?”360px”:”auto”);
        height:expression(document.body.clientWidth>576?”576px”:”auto”);
　     　overflow:hidden;
        position:relative;
        text-align: center;
	    vertical-align:middle;
		}
		.button {
		width:196.5px; height:43px;
		position:absolute; bottom:110px; left:24%;
		text-align: center;
	    vertical-align:middle;
		}
	}
	@media screen and (max-width: 359px) {
		.maincontent{ max-width:359px; min-height:512px; margin:0 auto; overflow:hidden; background-size:720px 640px;}
		.main{
　     　max-width:320px; max-height:512px;
        width:320px; height:512px;
　　     width:expression(document.body.clientWidth>320?”320px”:”auto”);
        height:expression(document.body.clientWidth>512?”512px”:”auto”);
　     　overflow:hidden;
        position:relative;
        text-align: center;
	    vertical-align:middle;
		}
		.button {
		width:157px; height:34px;
		position:absolute; bottom:80px; left:24%;
		text-align: center;
	    vertical-align:middle;
		}
	}
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="maincontent">
             <img src="image/main.png" class="main"/>
             <a href="daohang.html"><img src="image/button.png" class="button"/></a>
            </div>  
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
</body>
</html>